<template>
  <div>
    <van-form @submit="onSubmit" @failed="failed">
      <!--      学校名称-->
      <div class="input">
        <label>学校名称</label>
        <van-field
          v-model="school_name"
          name="school_name"
          placeholder="请填写学校名称"
          clearable
          :rules="[{ required: true }]"
        />
      </div>
      <!--      学历-->
      <div class="input">
        <label>学历</label>
        <!--        <van-cell is-link @click="show = !show">展示弹出层</van-cell>-->
        <van-field
          v-model="degree"
          name="degree"
          placeholder="请选择所属行业"
          :rules="[{ required: true}]"
          is-link
          disabled
          @click="show_degree_model = !show_degree_model"
        />
        <van-popup v-model="show_degree_model" round position="bottom" :style="{ height: '40%' }">
          <van-picker
            title="学历"
            show-toolbar
            :columns="degree_list"
            @confirm="degree_onConfirm"
          />
        </van-popup>
      </div>
      <!--      专业名称-->
      <div class="input">
        <label>专业名称</label>
        <van-field
          v-model="professional_name"
          name="professional_name"
          placeholder="请填写学校名称"
          clearable
          :rules="[{ required: true }]"
        />
      </div>
      <!--      就读时间-->
      <div class="input">
        <label>就读时间</label>
        <van-field
          v-model="read_time"
          name="read_time"
          placeholder="请选择就读时间"
          :rules="[{ required: true}]"
          is-link
          disabled
          @click="show_read_time_model = !show_read_time_model"
        />
        <van-popup v-model="show_read_time_model" round position="bottom" :style="{ height: '40%' }">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择就读时间"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @confirm="read_timeConfirm"
          />
        </van-popup>
      </div>
      <!--      毕业时间-->
      <div class="input">
        <label>毕业时间</label>
        <van-field
          v-model="graduation_time"
          name="graduation_time"
          placeholder="请填写离职时间"
          :rules="[{ required: true}]"
          is-link
          disabled
          @click="show_graduation_time_model = !show_graduation_time_model"
        />
        <van-popup v-model="show_graduation_time_model" round position="bottom" :style="{ height: '40%' }">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择毕业时间"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @confirm="graduation_timeConfirm"
          />
        </van-popup>
      </div>
      <!--      工作描述-->
      <div class="input">
        <div class="content">
          <p class="text">在校经历</p>
          <van-field
            v-model="school_experience"
            name="school_experience"
            type="textarea"
            placeholder="您对工作描述..."
            maxlength="750"
            show-word-limit
            class="school_experience"
          >
          </van-field>
        </div>
      </div>
      <van-button native-type="submit" round type="default" style="width: 100%; margin-top: 30px;" :class="{'btn_active': btn_active}">完成</van-button>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'form4-content',
  data () {
    return {
      school_name: '',
      degree: '',
      professional_name: '',
      read_time: '',
      graduation_time: '',
      school_experience: '',
      show_degree_model: false,
      show_read_time_model: false,
      show_graduation_time_model: false,
      degree_list: ['博士', '硕士', '本科', '专科', '高中'],
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2020, 10, 1),
      currentDate: new Date(),
      btn_active: true
    }
  },
  methods: {
    onSubmit (obj) {
      this.$store.dispatch('userInfo', obj)
      this.$Dialog.alert({
        title: '完成',
        message: ''
      }).then(() => {
        this.$router.push('/complete')
        this.$store.state.active++
      });
    },
    failed () {
    },
    degree_onConfirm (value) {
      this.degree = value
      this.show_degree_model = false
    },
    read_timeConfirm (t) {
      this.read_time = this.$moment(t).format('YYYY-MM-DD')
      this.show_read_time_model = false
    },
    graduation_timeConfirm (t) {
      this.graduation_time = this.$moment(t).format('YYYY-MM-DD')
      this.show_graduation_time_model = false
    },
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      }
      return val;
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.input {
  border-bottom: 0.5px dashed #cccccc;
  margin-top: 8px;

  label {
    color: #353535;
    font-size: 14px;
    padding-left: 16px;

    &::after {
      content: '*';
      color: red;
    }
  }

  &.job_status {
    .job_status_group {
      display: flex;
      justify-content: flex-start;

      .job_status_item {
        padding: 8px 0;
      }
    }
  }

  .content {
    padding: 10px 16px;

    .text {
      color: #353535;
      font-size: 14px;
    }

    .school_experience {
      margin-top: 10px;
      text-indent: 1em;
      line-height: 1.4em;
      color: #a3a8b2;
      border: 3px solid #e5e9ee;
      border-radius: 5px;
    }
  }
}

.btn_active {
  background-color: #59c262;
  color: #ffffff;
}
</style>
